<template>
  <div>
    <Loading :loading="loading">
      <Form :ref="formRef" :rules="formDataCheckRules" :label-width="90" :model="formData">
        <FormItem prop="name" label="名称:" style="width:90%">
          <Input type="text" v-model="formData.name" placeholder="请输入" />
        </FormItem>
        <FormItem prop="code" label="编码:" style="width:90%">
          <Input type="text" v-model="formData.code" placeholder="请输入" />
        </FormItem>
        <FormItem prop="applicationId" label="所属应用:" style="width:90%">
          <RemoteSelect :api="applicationApi" v-model="formData.applicationId" placeholder="请选择" />
        </FormItem>
        <FormItem prop="permissionIds" label="拥有权限:" style="width:90%">
          <RemoteTableSelect
            labelKey="name"
            primaryKey="id"
            v-model="formData.permissions"
            :needQueryParam="true"
            :namespace="permissionNamespace"
            :queryParam="permissionQueryParam"
            :columns="columns"
          >
            <SearchBar :namespace="permissionNamespace">
              <SearchBarItem label="id:" :labelLg="2">
                <Input type="text" v-model="queryParam.id.value" clearable />
              </SearchBarItem>
              <SearchBarItem label="名称:" :labelLg="5">
                <Input
                  type="text"
                  v-model="queryParam.name.value"
                  placeholder="请输入, 支持模糊查询"
                  clearable
                />
              </SearchBarItem>
              <SearchBarItem label="编码:" :labelLg="5">
                <Input
                  type="text"
                  v-model="queryParam.code.value"
                  placeholder="请输入, 支持模糊查询"
                  clearable
                />
              </SearchBarItem>
            </SearchBar>
          </RemoteTableSelect>
        </FormItem>
        <FormItem prop="describe" label="简介:" style="width:90%">
          <Input type="textarea" :rows="4" v-model="formData.describe" placeholder="请输入" />
        </FormItem>
        <FormItem :style="{width: '90%'}">
          <div :style="{textAlign: 'right'}">
            <Button type="primary" @click="handleSubmit">提交</Button>
          </div>
        </FormItem>
      </Form>
    </Loading>
  </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../module";
import {
  InputNumber,
  Input,
  Button,
  Form,
  FormItem,
  Message
} from "view-design";
import Loading from "@/components/Loading";
import RemoteSelect from "@/components/RemoteSelect";
import RemoteTableSelect from "@/components/RemoteTableSelect";
import SearchBar from "@/components/SearchBar";
import { namespace as permissionNamespace } from "../../Permission/module";
import Uuid from "uuid";
export default {
  components: {
    InputNumber,
    Loading,
    Input,
    Button,
    Form,
    FormItem,
    Message,
    RemoteSelect,
    RemoteTableSelect,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem
  },
  props: ["id"],
  beforeMount: async function() {
    let id = this.$route.params.id;
    let response = await this.$store.dispatch(`${namespace}/getDetail`, {
      id: id
    });
    if (response.errorcode === 0) {
      this.formData = response.data;
    }
  },
  data: function() {
    let vm = this;
    return {
      formRef: Uuid.v1(),
      formData: {
        permissions: []
      },
      permissionNamespace: permissionNamespace,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "id",
          key: "id",
          align: "center",
          width: 250
        },
        {
          title: "名称",
          key: "name",
          align: "center",
          width: 200
        },
        {
          title: "编码",
          key: "code",
          align: "center",
          width: 250
        },
        {
          title: "所属应用",
          key: "applicationName",
          align: "center",
          width: 250
        },
        {
          title: "简介",
          key: "describe",
          align: "center",
          minWidth: 200
        }
      ]
    };
  },
  methods: {
    handleSubmit: function() {
      let vm = this;
      this.$refs[this.formRef].validate(async valid => {
        if (valid) {
          let formData = JSON.parse(JSON.stringify(vm.formData));
          let permissions = formData.permissions;
          if (permissions) {
            let permissionIds = [];
            for (let i = 0; i < permissions.length; i++) {
              permissionIds.push(permissions[i].id);
            }
            formData.permissionIds = permissionIds;
            delete formData.permissions;
          }
          let response = await vm.$store.dispatch(
            `${namespace}/globalUpdate`,
            formData
          );
          if (response.errorcode === 0) {
            Message.success("提交成功");
            vm.$store.dispatch(`${namespace}/query`);
          }
        }
      });
    }
  },
  computed: {
    formDataCheckRules: function() {
      return {
        name: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
            type: "string"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
            type: "string"
          }
        ],
        applicationId: [
          {
            required: true,
            message: "请选择",
            trigger: "blur",
            type: "string"
          }
        ]
      };
    },
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    },
    applicationApi() {
      return (
        config.serverProxy + config.authServicePath + "/application/getOptions"
      );
    },
    permissionApi() {
      return (
        config.serverProxy + config.authServicePath + "/permission/getOptions"
      );
    },
    permissionQueryParam() {
      if (this.formData.applicationId) {
        return {
          applicationId: {
            value: this.formData.applicationId
          },
          order: ["code asc"]
        };
      } else {
        return null;
      }
    },
    queryParam: {
      get() {
        return this.$store.state[permissionNamespace].query;
      },
      set(value) {
        this.$store.commit(`${permissionNamespace}/saveState`, {
          query: value
        });
      }
    }
  }
};
</script>

<style>
</style>